<template>
	<!--头部-->
    <!-- :style="{'width': zxPageWidth+'px','height':zxPageHeight+'px'}" 页面会滚动 -->
    <div class="vue_app_main">
        <div class="contentEvlute">
            <div class="evalItem" :style="{marginTop:index==0?'3.5rem':'1rem'}"  v-for="(item,index) in getEvaluateDate" :key="index+'eval'">
                <evaluate ref='evaluateTo' :orderNo="item.orderNo" :goods="item" :commentConfigDate="commentConfigDate" ></evaluate>
            </div>
        </div>
        <!-- style="height: 2.5rem;padding: 0px;border-radius: 0px;background:#ef5423 !important;"  class="settle_accounts aui-btn aui-btn-block aui-btn-danger  fixed_div aui-card-list-content-padded aui-border-b aui-border-t" -->
		<div class="footerEvalute">
            <div @click="toEvaluate" style="height: 2.5rem;line-height: 2.5rem;font-size: 1rem;">提交</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import { Toast } from '../../utils/toast.js';
	import ImgUpLoader from '../../components/ImgUpload/index';
	import { mapGetters, mapMutations } from "vuex";
    import { CHANGE_NAVIGATION,EXIT_WEBVIEW } from '../../config/postMessage-types';
    import evaluate from './evaluate.vue';
	import { selectCommentConfig,saveGoodsComment} from '../../api/wxh/getData.js';
    import { showLoading, hideLoading } from "../../utils/loading";
	export default {
		data() {
			return {
                commentConfigDate:{},
                upFlag:true
			}
		},
		beforeCreate() {

		},
		components: {
            evaluate:evaluate,
        },
        created(){
            this.initData()
            let titleConfig = JSON.stringify({
                type: CHANGE_NAVIGATION,
                params: {
                    title: '商品评价'
                }
            })
            setTimeout(() => {
                window.postMessage(titleConfig)
            },0)
        },
		mounted() {
            
		},
		computed: {
			screenHeight() {
				return window.innerHeight - '80';
			},
			...mapGetters('zx', [
				"getEvaluateDate"
            ]),
            ...mapGetters("wxh", [
				"sessionId",
				"userInfo"
            ]),
            zxPageHeight(){
				return window.screen.height;
            },
            zxPageWidth(){
				return window.screen.width;
			},
        },
        watch: {
            userInfo(newVal,oldVal){
                console.log(oldVal,newVal,'用户信息改变了,处理用户被挤重新登录展示原来用户数据问题')
                // 处理用户被挤重新登录展示原来用户数据问题 登录处理了 此情况跳个人中心
                // let titleConfig = JSON.stringify({
                //     type: EXIT_WEBVIEW,
                // })
                // setTimeout(() => {
                //     window.postMessage(titleConfig)
                // },300)
            }
		},
		methods: {
			async initData() {
                let res = await selectCommentConfig();
                this.commentConfigDate = res;
                console.log(this.commentConfigDate,'评价shu ju')
                console.log(this.commentConfigDate instanceof Object,'评价')

            },
            //校验必填参数
            checkParams(arr){
                let target = [];
                let flag  = true; //默认
                arr && arr.length && arr.map((item,index) => {
                    if(item.commentTarget.length == 0){
                        target.push(0);
                    }else{
                        target.push(1);
                    }
                })
                if(target.length){
                    let str = target.join();
                    if(str.indexOf('1') == -1){
                        Toast({
                            message: "请选择标签！",
                            duration: 2000,
                            type: 'warn'
                        });
                        flag = false;
                    }
                }
                return flag;
            },
            toEvaluate(){
                let arr = this.$refs.evaluateTo;
                let orderNo = '111';
                let config = null;
                //校验必填参数 //改版后不限制必选标签
                // let flag = this.checkParams(arr); //判断是否填写标签 所有的都没填写则不发起请求
                // if(!flag){
                //     return;
                // }
                let evaluateArr = arr && arr.length && arr.map(async (item,index) => {
                    let obj = await item.submit();
                    return new Promise((resolve,reject) => {
                        resolve(obj)
                    })
                })
               
                Promise.all(evaluateArr).then(async (res) => {
                    let config1 = {'commentGoodsList':res};
                    let config2 = {'orderNo':res[0].orderNo};
                    config = Object.assign({},config1,config2);
                    console.log(config,'参数对象');
                    // return;zzzz
                    showLoading();
                    //开始请求接口
                    let req = await saveGoodsComment(config);
                    hideLoading();
                    let timer = setTimeout(function(){
                        hideLoading();
                        clearTimeout(timer)
                    },3000)
                    if(req.returnCode == 1) {
                        Toast({
                            message: "评价成功",
                            duration: 2000,
                            type: 'success'
                        });
                        let titleConfig = JSON.stringify({
                            type: EXIT_WEBVIEW,
                            params: {
                                title: "商品评价"
                            }
                        })
                        setTimeout(() => {
                            window.postMessage(titleConfig)
                        },300)
                    }else{
                        Toast({
                            message: req.msg,
                            duration: 2000,
                            type: 'fail'
                        });
                    }
                });
            },
		},
	}
</script>

<style scoped>
   .vue_app_main {
        width: 100%;
        height: 100%;
	}
    .evalItem {
        margin-top: 1rem;
        background: #999;
    }
    .contentEvlute{
        position: absolute;
        overflow-y: auto;
        bottom: 2.5rem;
        width:100%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .footerEvalute{
        position: absolute;
        bottom: 0;
        width:100%;
        height: 2.5rem;
        padding: 0px;
        border-radius: 0px;
        background:#ef5423;
        color:#fff;
    }
    /* .evaluteContent{
        height: 100%;
        background: pink;
        position:absolute;
        padding-top: 2.5rem;
        bottom:2.5rem;
        left:0;
        width: 100%;
        overflow-y:scroll;
    } */
</style>